<template>
    <div>
        <el-card style="margin: 20px;">
            <template #header>
                <div class="card-header">
                    <span>全部简历</span>
                    <hr />
                </div>
            </template>
            <div class="search">
                <div class="input" style="width: 350px">
                    <el-input v-model="search.input" placeholder="请输入搜索内容" class="input-with-select">
                        <template #prepend>
                            <el-select v-model="search.select" style="width: 105px">
                                <el-option label="UID" value="UID" />
                                <el-option label="用户名" value="username" />
                                <el-option label="手机号" value="phone" />
                                <el-option label="企业名称" value="firmname" />
                            </el-select>
                        </template>
                        <template #append>
                            <el-button icon="el-icon-search" />
                        </template>
                    </el-input>
                </div>
                <el-cascader :options="options" :props="props1" clearable />
                <el-cascader :options="options" :props="props1" clearable />

                <el-select v-model="search.value4"  placeholder="请选择注册来源">
                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"
                       >
                    </el-option>
                </el-select>


            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="UID" label="UID" />
                <el-table-column prop="firmname" label="企业名称" width="180" />
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="registration" label="注册时间" />
                <el-table-column prop="logintime" label="最近登录" />
                <el-table-column prop="memberstate" label="会员状态" />
                <el-table-column fixed="right" label="操作" width="250">
                    <template #default>
                        <el-button size="small" @click="handleClick">管理</el-button>
                        <el-button color="#409EFF" type="primary" size="small">查看</el-button>
                        <el-button color="#409EFF" type="primary" size="small">修改</el-button>
                        <el-dropdown>
                            <el-button size="small">
                                ...
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>日志</el-dropdown-item>
                                    <el-dropdown-item>解锁</el-dropdown-item>
                                    <el-dropdown-item>禁聊</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-button type="primary">添加会员</el-button>
                <el-button type="danger">删除会员</el-button>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="1">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {

    },
    data() {
        return {
            sort: 0,
            currentPage4: 1,
            props1: {
                checkStrictly: true,
            },
            search: {
                value4: "",
                select: 'UID',
                input: '',
            },
            tableData: [
                {
                    UID: '647',
                    firmname: 'Tom',
                    username: 'Tom',
                    phone: '13812345678',
                    registration: '2022-11-30 18:52',
                    logintime: '',
                    memberstate: 1,
                }
            ],
            options: [
                {
                    value: 'guide',
                    label: 'Guide',
                    children: [
                        {
                            value: 'disciplines',
                            label: 'Disciplines',
                            children: [
                                {
                                    value: 'consistency',
                                    label: 'Consistency',
                                },
                                {
                                    value: 'feedback',
                                    label: 'Feedback',
                                },
                                {
                                    value: 'efficiency',
                                    label: 'Efficiency',
                                },
                                {
                                    value: 'controllability',
                                    label: 'Controllability',
                                },
                            ],
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'side nav',
                                    label: 'Side Navigation',
                                },
                                {
                                    value: 'top nav',
                                    label: 'Top Navigation',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: 'component',
                    label: 'Component',
                    children: [
                        {
                            value: 'basic',
                            label: 'Basic',
                            children: [
                                {
                                    value: 'layout',
                                    label: 'Layout',
                                },
                                {
                                    value: 'color',
                                    label: 'Color',
                                },
                                {
                                    value: 'typography',
                                    label: 'Typography',
                                },
                                {
                                    value: 'icon',
                                    label: 'Icon',
                                },
                                {
                                    value: 'button',
                                    label: 'Button',
                                },
                            ],
                        },
                        {
                            value: 'form',
                            label: 'Form',
                            children: [
                                {
                                    value: 'radio',
                                    label: 'Radio',
                                },
                                {
                                    value: 'checkbox',
                                    label: 'Checkbox',
                                },
                                {
                                    value: 'input',
                                    label: 'Input',
                                },
                                {
                                    value: 'input-number',
                                    label: 'InputNumber',
                                },
                                {
                                    value: 'select',
                                    label: 'Select',
                                },
                                {
                                    value: 'cascader',
                                    label: 'Cascader',
                                },
                                {
                                    value: 'switch',
                                    label: 'Switch',
                                },
                                {
                                    value: 'slider',
                                    label: 'Slider',
                                },
                                {
                                    value: 'time-picker',
                                    label: 'TimePicker',
                                },
                                {
                                    value: 'date-picker',
                                    label: 'DatePicker',
                                },
                                {
                                    value: 'datetime-picker',
                                    label: 'DateTimePicker',
                                },
                                {
                                    value: 'upload',
                                    label: 'Upload',
                                },
                                {
                                    value: 'rate',
                                    label: 'Rate',
                                },
                                {
                                    value: 'form',
                                    label: 'Form',
                                },
                            ],
                        },
                        {
                            value: 'data',
                            label: 'Data',
                            children: [
                                {
                                    value: 'table',
                                    label: 'Table',
                                },
                                {
                                    value: 'tag',
                                    label: 'Tag',
                                },
                                {
                                    value: 'progress',
                                    label: 'Progress',
                                },
                                {
                                    value: 'tree',
                                    label: 'Tree',
                                },
                                {
                                    value: 'pagination',
                                    label: 'Pagination',
                                },
                                {
                                    value: 'badge',
                                    label: 'Badge',
                                },
                            ],
                        },
                        {
                            value: 'notice',
                            label: 'Notice',
                            children: [
                                {
                                    value: 'alert',
                                    label: 'Alert',
                                },
                                {
                                    value: 'loading',
                                    label: 'Loading',
                                },
                                {
                                    value: 'message',
                                    label: 'Message',
                                },
                                {
                                    value: 'message-box',
                                    label: 'MessageBox',
                                },
                                {
                                    value: 'notification',
                                    label: 'Notification',
                                },
                            ],
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'menu',
                                    label: 'Menu',
                                },
                                {
                                    value: 'tabs',
                                    label: 'Tabs',
                                },
                                {
                                    value: 'breadcrumb',
                                    label: 'Breadcrumb',
                                },
                                {
                                    value: 'dropdown',
                                    label: 'Dropdown',
                                },
                                {
                                    value: 'steps',
                                    label: 'Steps',
                                },
                            ],
                        },
                        {
                            value: 'others',
                            label: 'Others',
                            children: [
                                {
                                    value: 'dialog',
                                    label: 'Dialog',
                                },
                                {
                                    value: 'tooltip',
                                    label: 'Tooltip',
                                },
                                {
                                    value: 'popover',
                                    label: 'Popover',
                                },
                                {
                                    value: 'card',
                                    label: 'Card',
                                },
                                {
                                    value: 'carousel',
                                    label: 'Carousel',
                                },
                                {
                                    value: 'collapse',
                                    label: 'Collapse',
                                },
                            ],
                        },
                    ],
                },
                {
                    value: 'resource',
                    label: 'Resource',
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components',
                        },
                        {
                            value: 'sketch',
                            label: 'Sketch Templates',
                        },
                        {
                            value: 'docs',
                            label: 'Design Documentation',
                        },
                    ],
                },
            ],
            options4: [
                {
                    value: 1,
                    label: 'APP'
                }, {
                    value: 2,
                    label: '手机浏览器'
                }, {
                    value: 3,
                    label: '微信浏览器'
                }, {
                    value: 4,
                    label: '微信小程序'
                }, {
                    value: 5,
                    label: '抖音小程序'
                }, {
                    value: 6,
                    label: '电脑浏览器'
                }]

        }
    },
    mounted() {

    },
    methods: {
        handleClick() {
            console.log('click')
        },
        handleSizeChange(val) {
            console.log(`${val} items per page`)
        },
        handleCurrentChange(val) {
            console.log(`current page: ${val}`)
        }
    }
}
</script>

<style scoped lang="less">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search {
    height: 50px;

    .el-select {
        float: left;
        width: 145px;
        margin-right: 2px;
    }

    .input {
        float: left;
    }
}

.el-table {}

.footer {
    margin-top: 15px;

    .el-pagination {
        float: right;
    }
}
</style>
